<template>
    <view>
	<view v-if="list.length === 0">
		<u-empty :text="$t('nodata_goods')" mode="car" icon="https://i.yodin.com/storage/empty/data.png"></u-empty>
	</view>
	<u-grid :border="false" col="2"  class="u-padding-4" v-else>
		<u-grid-item class="" v-for="(item,index) in list" :key="index">
			<view class="goodsBox" @tap="$tools.goJump('/pages/goods/view',{id:item.goods_id})">
				<view class="fukuan" v-if="item.sales_totalnum!=''">{{item.sales_totalnum}}{{$t('x_personpaid')}}</view>
				<u--image :showLoading="true" :lazy-load="true" :src="item.cover_thumb" width="100%" height="auto" mode="widthFix" radius="12rpx 12rpx 0px 0px">
					  <template v-slot:loading>
					    <u-loading-icon color="red"></u-loading-icon>
					  </template>
				</u--image>
				<view class="info">
					<view class="desc u-flex u-flex-between">
					<view class="price u-font-30"><span v-if="item.price>0||item.price!='-'">{{siteInfo.money.symbol}}</span>{{item.price}}</view>
					</view>
					<view class="title u-line-2">
						<span class="tag" v-for="tag in item.tags" :style="'background:'+tag.color">{{tag.tag}}</span>
						{{item.name}}
					</view>
				</view>
			</view>
		</u-grid-item>
	</u-grid>

    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    props:{
        list:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {

        }
    },
	computed:{
		...mapState(['siteInfo']),
	},
    //第一次加载
    created(e) {
		//this.cktags()
    },
    watch: {
		list:{
			handler(tnew,old){
				tnew.forEach((tagsids,index) =>{
					if (tagsids.tag_names=='')return
					let tags=tagsids.tag_names.split(",")
					if (tags.length==0)return
					this.list[index].tags=new Array()
					tags.forEach((tag,index2) =>{
						this.list[index].tags[index2]=new Array()
						this.list[index].tags[index2].tag=tag
						if (index2==0)this.list[index].tags[index2].color='#ffcc00'
						if (index2==1)this.list[index].tags[index2].color='#66D068'
						if (index2==2)this.list[index].tags[index2].color='#CCD01A'
						if (index2==3)this.list[index].tags[index2].color='#FF829C'
						if (index2==4)this.list[index].tags[index2].color='#CCB61A'
					})
				})
			},
			immediate:true
		},
    },
    methods: {
        onJump(url){
            uni.$u.route({url: url,params:{id:'ddd'}})
        },
    }
}
</script>
<style lang="scss" scoped>
.tag{
	color:#ffffff;
	margin-right: 3px;
	border-radius: 4px;
	padding: 0px 3px;
	font-size: 11px;
}
.goodsBox{
	margin: 4%;
    width:96%;
	position:relative;
	.fukuan{
		position: absolute;
		right:10rpx;
		top:10px;
		color: #ffffff;
		z-index: 2;
		font-size: 12px;
		background: #666;
		border-radius: 6px;
		padding: 0px 5px;
	}
    .info{
		overflow: hidden;
		background: #ffffff;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10rpx 20rpx 20rpx 20rpx;
		border-radius: 0 0 12rpx 12rpx;
		
        .title{
            font-size: 15px;
            color: #333;
			min-height: 42px;
			line-height: 20px;
			height: 40px;
			overflow: hidden;
        }
        .desc{
            width: 100%;
            font-size: 26rpx;
            color: #666;
        }
    }
}
</style>
